fix: add type definitions, extract hook, and implement security harde… by HardikTi13 · Pull Request #705 · accordproject/template-playground

HardikTi13 · 2026-02-14T19:06:05Z

Closes #703

Summary

This PR fixes multiple critical issues affecting build stability, type safety, and application security. It also includes refactoring improvements to enhance modularity and remove lint warnings.

Changes

Build & Type Safety

Added src/types/markdown-template.d.ts to provide proper types for @accordproject/markdown-template, resolving TemplateMarkTransformer errors.
Fixed store.ts
- Removed unnecessary eslint-disable comments.
- Removed unsafe type assertions (as object, as unknown).
- Corrected type casting to Record<string, unknown> for TemplateMarkInterpreter.generate.
Removed unused imports (e.g., monaco in CodeSelectionMenu.tsx) that were causing build failures.

Refactoring

Extracted useCodeSelection hook
src/components/CodeSelectionMenu.tsx → src/hooks/useCodeSelection.tsx
Resolves React Refresh lint warning (file should only export components).
Improves modularity and avoids potential circular dependencies.
Updated:
- MarkdownEditor
- ConcertoEditor
- JSONEditor
  to use the new hook location.

Security Hardening

Added DOMPurify sanitization before rendering HTML with dangerouslySetInnerHTML.
- src/pages/MainContainer.tsx
- src/AgreementHtml.tsx
Added rel="noopener noreferrer" to external links in src/components/Footer.tsx to prevent reverse tabnabbing.

Result

Build passes successfully
Improved type safety
Removed lint warnings
XSS-safe HTML rendering
Prevented reverse tabnabbing
Cleaner and more maintainable codebase

…ning Signed-off-by: Hardik Tiwari <tiwarihardik131105@gmail.com>

netlify · 2026-02-14T19:06:11Z

✅ Deploy Preview for ap-template-playground ready!

Name	Link
🔨 Latest commit	`4b4cd1c`
🔍 Latest deploy log	https://app.netlify.com/projects/ap-template-playground/deploys/69ac70e799448b000889cbaf
😎 Deploy Preview	https://deploy-preview-705--ap-template-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

mttrbrts

Please review build conflicts

Copilot

Pull request overview

This PR addresses build stability, type safety, and security concerns in the Template Playground application. The changes include adding type definitions for an external library, implementing XSS protection through HTML sanitization, preventing reverse tabnabbing attacks on external links, refactoring a React hook for better modularity, and adding DOMPurify as a dependency.

Changes:

Added type definitions for @accordproject/markdown-template to resolve TypeScript errors
Implemented DOMPurify sanitization for HTML rendering to prevent XSS attacks
Added rel="noopener noreferrer" to external links in Footer component to prevent reverse tabnabbing
Extracted useCodeSelection hook from CodeSelectionMenu component to a separate hooks file
Added dompurify and @types/dompurify dependencies

Reviewed changes

Copilot reviewed 9 out of 13 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/types/markdown-template.d.ts	Adds TypeScript type definitions for TemplateMarkTransformer class (though the signature doesn't match actual usage)
src/pages/MainContainer.tsx	Adds DOMPurify sanitization before rendering agreementHtml with dangerouslySetInnerHTML
src/hooks/useCodeSelection.tsx	Extracts code selection logic into a reusable hook (creates architectural coupling by returning JSX component)
src/editors/MarkdownEditor.tsx	Updates import path for useCodeSelection hook
src/editors/JSONEditor.tsx	Updates import path for useCodeSelection hook
src/editors/ConcertoEditor.tsx	Updates import path for useCodeSelection hook
src/components/Footer.tsx	Adds rel="noopener noreferrer" to all external links for security
src/components/CodeSelectionMenu.tsx	Removes useCodeSelection hook and monaco import (moved to separate hook file)
src/AgreementHtml.tsx	Adds DOMPurify sanitization before rendering agreementHtml with dangerouslySetInnerHTML
package.json	Adds dompurify and `@types/dompurify` dependencies
package-lock.json	Updates lock file with new dependencies and corrects `@types/trusted-types` optional flag
lint.txt	Build/test output file that should not be committed
lint-errors.txt	Build/test output file that should not be committed

Copilot · 2026-02-25T20:26:53Z

src/hooks/useCodeSelection.tsx

+import CodeSelectionMenu from '../components/CodeSelectionMenu';
+
+export const useCodeSelection = (editorType: 'markdown' | 'concerto' | 'json') => {
+  const [selectedText, setSelectedText] = useState('');
+  const [menuPosition, setMenuPosition] = useState<{ x: number; y: number } | null>(null);
+  const [showMenu, setShowMenu] = useState(false);
+  const enableCodeSelectionMenu = useAppStore((state) => state.aiConfig?.enableCodeSelectionMenu ?? true);
+
+
+  const handleSelection = (editor: monaco.editor.IStandaloneCodeEditor) => {
+    const selection = editor.getSelection();
+    if (selection && !selection.isEmpty()) {
+      const selectedText = editor.getModel()?.getValueInRange(selection).trim();
+      if (selectedText && selectedText.length > 0) {
+        const position = editor.getScrolledVisiblePosition(selection.getStartPosition());
+        const editorContainer = editor.getDomNode()?.closest('.editorwrapper');
+        const editorRect = editorContainer?.getBoundingClientRect();
+
+        let x: number, y: number;
+
+        if (editorRect && position) {
+          x = Math.max(editorRect.left + 20, Math.min(position.left, editorRect.right - 150));
+          y = Math.max(editorRect.top + 20, Math.min(position.top, editorRect.bottom - 50));
+
+          x = Math.max(10, Math.min(x, window.innerWidth - 150));
+          y = Math.max(10, Math.min(y, window.innerHeight - 50));
+        } else if (position) {
+          x = Math.max(10, Math.min(position.left, window.innerWidth - 150));
+          y = Math.max(10, Math.min(position.top, window.innerHeight - 50));
+        } else {
+          return;
+        }
+
+        setSelectedText(selectedText);
+        setMenuPosition({
+          x: x,
+          y: y
+        });
+        setShowMenu(true);
+      }
+    } else {
+      setShowMenu(false);
+    }
+  }
+
+  const closeMenu = () => {
+    setShowMenu(false);
+    setSelectedText('');
+    setMenuPosition(null);
+  };
+
+  const MenuComponent = (enableCodeSelectionMenu && showMenu && selectedText && menuPosition) ? (
+    <CodeSelectionMenu
+      selectedText={selectedText}
+      position={menuPosition}
+      onClose={closeMenu}
+      editorType={editorType}
+    />
+  ) : null;


The new hook file imports CodeSelectionMenu component at line 4, creating a circular dependency. The hook is meant to be used by editors that need the code selection functionality, but it imports the component that should use the hook's return value. This defeats the purpose of extracting the hook for modularity. The MenuComponent should be rendered by the consuming component (MarkdownEditor, JSONEditor, ConcertoEditor) instead of being created inside the hook. The hook should only return the state and handlers, not the JSX component.

Resolved conflicts in package-lock.json and src/AgreementHtml.tsx Signed-off-by: HardikTi13 <tiwari.hardik1399@gmail.com>

- Hook now only exports state and handlers (no JSX) - Editors import and render CodeSelectionMenu directly - Renamed useCodeSelection.tsx to useCodeSelection.ts (no JSX needed) Signed-off-by: HardikTi13 <tiwari.hardik1399@gmail.com>

I, Hardik Tiwari <tiwarihardik131105@gmail.com>, hereby add my Signed-off-by to this commit: 418bf33 Signed-off-by: Hardik Tiwari <tiwarihardik131105@gmail.com>

Copilot

Pull request overview

Copilot reviewed 7 out of 11 changed files in this pull request and generated 1 comment.

package.json

Type definitions should only be in devDependencies, not runtime dependencies. Signed-off-by: Hardik Tiwari <tiwarihardik131105@gmail.com>

mttrbrts

Please remove the lint txt files and the change to package.json.

Also, I recommend removing the typedefs for now, I've left a comment about how to do that properly which can be done in a separate PR.

mttrbrts · 2026-03-07T17:31:11Z

src/types/markdown-template.d.ts

We should move typescript typedef upstream to the @accordproject/markdown-template package.
There is an example in the concerto repository for creating typedefs from jsdocs.
accordproject/markdown-transform#648

fix: add type definitions, extract hook, and implement security harde…

336c2da

…ning Signed-off-by: Hardik Tiwari <tiwarihardik131105@gmail.com>

HardikTi13 requested a review from a team as a code owner February 14, 2026 19:06

mttrbrts requested a review from Copilot February 25, 2026 20:20

mttrbrts requested changes Feb 25, 2026

View reviewed changes

Copilot started reviewing on behalf of mttrbrts February 25, 2026 20:22 View session

Copilot AI reviewed Feb 25, 2026

View reviewed changes

Merge upstream/main into fix/build-security-type-issues

b2da04a

Resolved conflicts in package-lock.json and src/AgreementHtml.tsx Signed-off-by: HardikTi13 <tiwari.hardik1399@gmail.com>

HardikTi13 force-pushed the fix/build-security-type-issues branch from d5f017f to b2da04a Compare February 25, 2026 20:45

HardikTi13 added 2 commits February 26, 2026 02:29

DCO Remediation Commit for Hardik Tiwari <tiwarihardik131105@gmail.com>

d5fac52

I, Hardik Tiwari <tiwarihardik131105@gmail.com>, hereby add my Signed-off-by to this commit: 418bf33 Signed-off-by: Hardik Tiwari <tiwarihardik131105@gmail.com>

HardikTi13 requested a review from mttrbrts February 25, 2026 21:06

mttrbrts requested a review from Copilot February 25, 2026 21:39

Copilot started reviewing on behalf of mttrbrts February 25, 2026 21:40 View session

Copilot AI reviewed Feb 25, 2026

View reviewed changes

package.json Outdated Show resolved Hide resolved

HardikTi13 and others added 5 commits February 26, 2026 03:18

Merge branch 'main' into fix/build-security-type-issues

5608361

fix: move @types/dompurify to devDependencies only

dae227d

Type definitions should only be in devDependencies, not runtime dependencies. Signed-off-by: Hardik Tiwari <tiwarihardik131105@gmail.com>

Merge branch 'main' into fix/build-security-type-issues

8611740

Merge branch 'main' into fix/build-security-type-issues

368875b

Merge branch 'main' into fix/build-security-type-issues

b025235

github-actions bot mentioned this pull request Mar 4, 2026

Monthly issue metrics report accordproject/.github#1

Open

mttrbrts requested changes Mar 7, 2026

View reviewed changes

Merge branch 'main' into fix/build-security-type-issues

4b4cd1c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: add type definitions, extract hook, and implement security harde…#705

fix: add type definitions, extract hook, and implement security harde…#705
HardikTi13 wants to merge 10 commits intoaccordproject:mainfrom
HardikTi13:fix/build-security-type-issues

HardikTi13 commented Feb 14, 2026

Uh oh!

netlify bot commented Feb 14, 2026 •

edited

Loading

Uh oh!

mttrbrts left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 25, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

mttrbrts left a comment

Uh oh!

mttrbrts Mar 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

HardikTi13 commented Feb 14, 2026

Summary

Changes

Build & Type Safety

Refactoring

Security Hardening

Result

Uh oh!

netlify bot commented Feb 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for ap-template-playground ready!

Uh oh!

mttrbrts left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

mttrbrts left a comment

Choose a reason for hiding this comment

Uh oh!

mttrbrts Mar 7, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify bot commented Feb 14, 2026 •

edited

Loading